<template>
  <div>
    <template v-if="multiple">
      <el-button type="text" @click="addAddress" v-if="maxLength?value.length<maxLength:true"><i
        class="fa fa-plus-circle"></i> 添加地址
      </el-button>
      <el-row v-for="(address, index) in value" :key="index">
        <el-col :span="detailFlag?8:23">
          <el-cascader
            :placeholder="placeholderBefore"
            :options="cityData"
            filterable
            change-on-select
            :value="address"
            :clearable="true"
            @change="function(value){changeSingleAddress(value, index)}"
          ></el-cascader>
        </el-col>
        <el-col :span="15" v-if="detailFlag">
          <el-input v-model="address[3]" :placeholder="placeholder" @change="$emit('change', value);"></el-input>
        </el-col>
        <el-col :span="1" class="text-center">
          <el-button type="text" @click="removeAddress(index)" v-if="minLength?value.length>minLength:true"><i
            class="fa fa-trash"></i></el-button>
        </el-col>
      </el-row>
    </template>
    <template v-else>
      <el-row>
        <el-col :span="detailFlag?8:24">
          <el-cascader
            :placeholder="placeholderBefore"
            :options="cityData"
            filterable
            change-on-select
            :value="value"
            :clearable="true"
            @change="changeCity"
          ></el-cascader>
        </el-col>
        <el-col :span="16" v-if="detailFlag">
          <el-input v-model="value[3]" :placeholder="placeholder" @change="$emit('change', value);"></el-input>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
  import addressData from './addressData'

  export default {
    props: {
      value: {
        default: () => {
          return [];
        }
      },                 //value
      placeholder: {default: '详细地址'},          //placeholder
      placeholderBefore: {default: '可输入搜索...'},     //placeholderBefore
      multiple: {default: false},                 //是否多个地址
      minLength: {},                              //最小长度
      maxLength: {},                              //最大长度
      detailFlag: {default: true},                //是否带详细地址
    },
    data: function () {
      let params = {
        cityData: addressData
      };
      return params;
    },
    computed: {
      radioFlag: function () {
        return this.checkFlag && !this.multiple;
      },
    },
    methods: {
      changeCity(value){
        this.$emit('input', value);
        this.$emit('change', value);
      },
      changeSingleAddress(value, index){
        let newValue = this.value.concat();
        newValue[index] = value;
        this.$emit('input', newValue);
        this.$emit('change', newValue);
      },
      addAddress(){
        let newValue = this.value.concat();
        newValue.push([]);
        this.$emit('input', newValue);
      },
      removeAddress(index){
        let newValue = this.value.concat();
        newValue.splice(index, 1);
        this.$emit('input', newValue);
      },
    },

    created: function () {
      if (this.minLength) {
        let newValue = this.value.concat();
        for (; newValue.length < this.minLength;) {
          newValue.push([]);
        }
        this.$emit('input', newValue);
      }
    }
  }
</script>
